<template>

  <el-row>
    <el-tabs tab-position="left" style="padding-top: 20px">
      <el-tab-pane label="">说明:历史流程实例激活功能使用的时候，需要设置开始的节点。如果激活的节点没有设置处理人信息，则默认为历史处理人。业务键最好全局唯一，方便后续接口级别的交互</el-tab-pane>
    </el-tabs>
    <div style="display: block;margin-left: 33px" class="main-div">

      <div style="margin-top: 20px;margin-left: 35px">
        <el-form ref="addForm" :model="addForm" label-width="90px" style="display: block" :rules="rules">
          <el-form-item label="激活节点" prop="chooseNode">
             <span v-for="(item,index) in tableData">
          <el-radio v-model="addForm.chooseNode" :label="item.taskDefinitionKey">{{item.name}}</el-radio>
          </span>
          </el-form-item>
          <el-form-item label="原有业务键" prop="oldBizKey">
            <el-input class="input_w" placeholder="业务键" v-model="addForm.oldBizKey" :disabled="true">
            </el-input>
          </el-form-item>
          <el-form-item label="新业务键" prop="bizKey">
            <el-input class="input_w" placeholder="业务键" v-model="addForm.bizKey" >
            </el-input>
          </el-form-item>


          <el-form-item label="处理人" >

            <el-button type="primary" @click="selectAddSignUsers()">
              <Icon type="ios-contact" />
              设置
            </el-button>
          </el-form-item>
          <el-form-item label="" v-if="addForm.users.length>0" >


            <el-button
              v-for="(item,nodeIndex) in addForm.users"
              type="danger"
              style="margin-left: 2px"
              color="primary"
              @click="delCommonUsers(nodeIndex)"
            >
              {{ item.fullname }} &nbsp;<Icon type="md-close" />
            </el-button>

          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="save"    :loading="loading">保存</el-button>


            <el-button type="primary" @click="go">
              <Icon type="md-close"/>
              关闭
            </el-button>
          </el-form-item>


        </el-form>
      </div>

    </div>

    <user-multiple-dialog
      :on-ok="confirmDialogEvent"
      :show.sync="show"
      :exist-data="existData"
      :node-index="index"
      :alias="alias"
    />
  </el-row>


</template>

<script>
  import { getAllHisActivity,restartSave} from "@/api/busModel";
  import userMultipleDialog from '@/views/components/org/userMultipleDialog'

  export default {
    name: 'Task',
    components: {userMultipleDialog},
    data() {

      return {
        loading:false,
        rules: {
          chooseNode: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ]
        },
        ueditor: {
          value: '',          //编辑器默认内容
          config: {           //设置编辑器宽高
            initialFrameWidth: null,
            initialFrameHeight: 350
          }
        },
        show: false,
        addModel: false,
        alias: 'agree',
        activeName: 'first',
        addForm: {
          id: "",
          oldBizKey: "",
          bizKey: "",
          chooseNode: '',
          processDefinitionId: '',
          afi:{},
          users:[]
        },
        batchForm: {
          id: "",
          type: [],
          emailContent: "",
        },
        tableData: [],
        msgData: [],
        tableHeight: 450,
        queryDate: [],
        total: 0,
        chartVisible: false,
        forbiddenSwitch: false,
        modal_loading: false,
        msgModal: false,
        show: false,
        index: 0,
        existData: []
      }
    },
    mount() {

    },
    created() {
      // this.getData()
      var query = this.$route.query;
      this.addForm.id = query.pid;
      if (query.pid) {
        //初始化数据
        this.getAllActivity(query.pid)

      }
    },
    methods: {
      confirmDialogEvent: function (data) {
        this.addForm.users=data
        this.show = false
      },
      delCommonUsers: function (index) {
        this.addForm.users.splice(index, 1)
      },
      selectAddSignUsers: function (index) {
        this.index = index
        try {
          var node = this.tableData[this.index]
          if (node.activeName == 'created') {
            this.existData = node.userCreatedNotify
          } else {
            this.existData = node.userCompletedNotify
          }
        } catch (e) {
          this.existData = []
        }
        this.show = true
      },
      onSubmit: function () {
      },
      getAllActivity: function (id) {
        getAllHisActivity(id).then((response2) => {
          if (response2.code == 0) {
            var data = response2.hpie;
            this.addForm.afi= response2.afi;
            this.addForm.oldBizKey= response2.afi.bizKey;
            this.addForm.bizKey= response2.afi.bizKey;
            this.addForm.processDefinitionId= response2.afi.procDefId;
            this.tableData = data;
          }
        })


      },
      go: function () {
        this.$router.go(-1)
      },
      close: function () {
        this.$store.dispatch('tagsView/delView', this.$route)
// 返回上一步路由
        this.$router.go(-1)
      },
      save: function () {
        try {
          this.$refs['addForm'].validate((valid) => {
            if (valid) {
              this.loading=true
              restartSave(this.addForm).then((response2) => {
                if (response2.code == 0) {
                  this.$message({"duration":'800',message:'激活成功',type:'success',customClass:'zZindex'});

                  this.close();
                }else{
                  this.$message({"duration":'800',message:response2.msg,type:'success',customClass:'zZindex'});

                }
                this.loading=false
              })

            } else {
              console.log('error submit!!');
              return false;
            }
          });

        }finally {
          this.loading=false

        }



      },

    }

  }

</script>
<style lang="scss" scoped>
  .task-card {
    margin-top: 10px;
  }

  .input_w {
    width: 40% !important;
  }

  .task-card {
    margin-top: 10px;
  }

  .item {
    display: block;
    margin-top: 20px;
    box-shadow: 0 0 20px 0 rgba(204, 207, 227, .45);
    margin-bottom: 10px;

  }

  .left {
    font-size: 16px;
    color: #575757;
  }

  img {
    width: 60px;
    height: 60px;
  }

</style>
